<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" >
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" href="reset.css">
  <link rel="stylesheet" href="style.css">
  <link rel="stylesheet" type="text/css" th:href="@{/css/index/style.css}"/>
  <link href="../static/css/bootstrap.min.css" th:href="@{/css/bootstrap.min.css}" rel="stylesheet"/>
  <link rel="stylesheet" th:href="@{/css/pagination.css}" type="text/css">
  <style>
    .imgtag{
      width: 13px;
    }
    div.list-item:first-child{
      margin-top: 30px;
    }
    .table th, .table td{
      font-size: 16px;
    }
    .table td.pro_name{
      cursor: pointer;
      color: #479eff;
    }

    #light {
      margin: 0 auto;
      width: 105px;
      height: 30px;
    }

    .red-light {
      float: left;
      margin:0 10px 0 10px;
      line-height: 190%;
      font-weight:bold;
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      box-shadow:
              0 0 2px #ff6b78,
              -2px 0 8px #ff0300,
              4px 0 8px #ff6b78,
              inset 0 0 5px #ff6b78,
              inset 5px 0 8px #ff0300,
              inset -5px 0 8px #ff6b78,
              inset 5px 0 30px #ff0300,
              inset -5px 0 30px #ff6b78;
      /*animation: pulsate 3s linear infinite;*/
    }

    .yel-light {
      float: left;
      margin:0 10px 0 10px;
      line-height: 190%;
      font-weight:bold;
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      box-shadow:
              0 0 2px #ffd872,
              -2px 0 8px #ffb700,
              4px 0 8px #ffd872,
              inset 0 0 5px #ffd872,
              inset 5px 0 8px #ffb700,
              inset -5px 0 8px #ffd872,
              inset 5px 0 30px #ffb700,
              inset -5px 0 30px #ffd872;
      /*animation: pulsate 3s linear infinite;*/
    }

    .grey-light {
      float: left;
      margin:0 10px 0 10px;
      line-height: 190%;
      font-weight:bold;
      color: white;
      width: 30px;
      height: 30px;
      border-radius: 50%;
      background-color: #a7a7a7;
    }
    /*.project-name{*/
    /*  cursor: pointer;*/
    /*}*/
    /*.project-name:hover{*/
    /*  color: #479eff;*/
    /*}*/


  </style>
</head>
<body>
  <div class="d-container flex">
    <!-- 上半部分布局 -->
    <div class="container-t flex">
      <!-- 项目总数模块 -->

      <!-- 当前红灯模块 -->
      <div class="common-item item_02">
        <div class="item-title flex">
          <span>当前红灯</span>
          <!-- 更多按钮 -->
          <a style="cursor: pointer; z-index: 999;" class="edit"  href="javascript:;" onclick="lightmore(1)">more+</a>
        </div>
        <div class="item-content echarts-wrap">
          <!-- 红灯数据饼图 -->
          <div id="echarts-red" style="width: 100%;height: 100%;"></div>
        </div>
        <div class="light flex">
          <img src="img/red.png" alt="">
          <p>红灯总数
             <!-- 红灯总数 -->
            <span th:text="${red_count}" >20</span>
             个
          </p>
        </div>
      </div>
      <div class="common-item item_03">
        <div class="item-title flex">
          <span>当前黄灯</span>
           <!-- 更多按钮 -->
          <a style="cursor: pointer; z-index: 999;" class="edit"  href="javascript:;" onclick="lightmore(2)">more+</a>
        </div>
        <div class="item-content echarts-wrap">
          <!-- 黄灯数据饼图 -->
          <div id="echarts-yellow" style="width: 100%;height: 100%;"></div>
        </div>
        <div class="light flex">
          <img src="img/yellow.png" alt="">
          <p>黄灯总数
             <!-- 黄灯总数 -->
            <span th:text="${yel_count}">20</span>
            个
          </p>
        </div>
      </div>
      <!-- 部门统计 -->
      <div class="common-item item_03">
        <div class="item-title flex" style="z-index: 999999">
          <span>部门【亮灯】情况统计</span>
          <!-- 更多按钮 -->

          <span><a id="back_btn" style="display: none;cursor: pointer;" onclick="back_fun()">返回</a> <a style="cursor: pointer;"  onclick="deptMore()">more+</a></span>
        </div>
        <div class="item-content echarts-wrap">
          <!-- 部门统计 -->
          <div id="echarts-dept" style="width: 100%;height: 100%;"></div>
        </div>

      </div>

      <div class="common-item item_04">
        <div class="item-title flex">
          <span>亮灯数据</span>
          <!-- 更多按钮 -->
          <a>more+</a>
        </div>
        <div class="item-content echarts-wrap">
          <!-- 红灯数据柱图 -->
          <div id="echarts-bar" style="width: 100%;height: 100%;"></div>
        </div>
      </div>


    </div>
    <!-- 下半部分布局 -->
    <div class="container-b flex">
      <div class="common-item item_02">
        <div class="item-title flex">
          <span>通知公告</span>
          <!-- 更多按钮 -->
<!--          <a>more+</a>-->
          <a  style="cursor: pointer; z-index: 999;" class="edit"  href="#" onclick="jumpNotice()">more+</a>
          <!--<a  style="cursor: pointer; z-index: 999;" class="edit"  href="#" onclick="backlog()">待办事项</a>-->
<!--          <a  style="cursor: pointer; z-index: 999;" class="edit"  href="#" onclick="signFor()">事项签收</a>-->
        </div>
        <div class="item-content">
          <!-- 通知公告list -->
          <div class="notice-list">

            <!-- 通知公告list item-->
            <div th:class="${i.count} == 1 ? 'list-item active' : 'list-item' " th:each="sysNotice,i : ${sys_notices} ">
              <div class="item-t flex" th:onclick="preview([[${sysNotice.lkNoticeId}]] , [[${sysNotice.isRead}]])">
                <!-- 项目名称 -->
                <div class="p-name" style="overflow: hidden; text-overflow: ellipsis; white-space: nowrap;" th:text="${sysNotice.lightType} == '1'? ${sysNotice.name} + '事项红灯警示单': ${sysNotice.name}+'事项黄灯警示单'"></div>
                <div class="p-time" th:style="${i.count} == 1 ? 'display: none;' : ''" th:text="${#dates.format(sysNotice.createTime, 'yyyy-MM-dd HH:mm')}"></div>
              </div>
              <!-- 其他信息 -->
              <div class="p-info" th:style="${i.count} == 1 ? 'display: block;' : ''">
                <p class="flex">
                  <span>负责单位：</span>
                  <span th:text="${sysNotice.lkMatterProject.mainOrgname}"></span>
                </p>
                <p class="flex">
                  <span>发起时间：</span>
                  <span th:text="${#dates.format(sysNotice.lkMatterProject.createTime, 'yyyy-MM-dd')}"></span>
                </p>
                <p class="flex">
                  <span>计划完成时间：</span>
                  <span th:text="${sysNotice.planningTime}"></span>
                </p>
              </div>
            </div>


          </div>
        </div>
      </div>
      <div class="common-item item_01">
        <div class="item-title flex">
          <span>我的警示单</span>
           <!-- 更多按钮 -->
           <a  style="cursor: pointer; z-index: 999;" class="edit"  href="#" onclick="projectmore()">more+</a>
        </div>
        <div class="line" style="width: 100%; border: 0.5px solid #eee;margin-top: 35px;"></div>
        <div class="item-content" style="margin-top: -50px;">
          <div class="table-box">
            <div class="box">

              <div class="content">


                <!--添加按钮及bootstrap的模态框-->

                <!--表格列表-->
                <table id="tb" class="table">
                  <thead>
                  <tr>
                    <th>亮灯统计</th>
                    <th>项目名称</th>
                    <th>步骤名称</th>
                    <th>负责人</th>
                    <th>移交日期</th>
                    <th>操作</th>
                  </tr>
                  </thead>
                  <tbody id="show_tbody">
                  </tbody>
                </table>
                <div style="    display: flex;justify-content: center;">
                  <div id="pagination" class="pageDiv"></div>
                </div>
              </div>
            </div>

          </div>
        </div>
      </div>


    </div>
  </div>
  <!-- 页脚 -->
  <div class="foot">
    <p>思创数码科技公司    版权所有</p>
  </div>
  <th:block th:include="include :: footer" />

  <script src="/js/echarts.min.js"></script>
  <script type="text/javascript" th:src="@{/jade/js/pagination.min.js}"></script>
  <script th:inline="javascript">
    var total_count = [[${total_count}]]; // 总灯数
    var red_count = [[${red_count}]];
    var yel_count = [[${yel_count}]];
    var userName = [[${@permission.getPrincipalProperty('loginName')}]];//用户信息
    $(function(){
      // 红灯
      var red={
        id:'echarts-red',//绑定dom id
        title:'红',
        color:'#ed0000',//颜色
        val:red_count,//当前灯数
        totleVal:total_count//总灯数
      }
      var yellow={
        id:'echarts-yellow',//绑定dom id
        title:'黄',
        color:'#ffb400',//颜色
        val:yel_count,//当前灯数
        totleVal:total_count//总灯数
      }
      initDeptCharsData();
      createDoughnut(red);//红灯饼图
      createDoughnut(yellow);//黄灯饼图
      createBar();//红灯数据柱图
      noticeListAcyive();//通知公告交互
      // deptBar(); // 部门统计
      // if (userName != 'admin') {
      //   backlog();//待办事项
      // }
      // signFor();//事项接受
    })
    //通知公告交互方法
    function noticeListAcyive(){
      $('.notice-list .list-item').hover(function(){
        var that=$(this);
        that.addClass('active').siblings().removeClass('active');
        that.find('.p-time').hide()
        that.siblings().find('.p-time').show();
        that.find('.p-info').show()
        that.siblings().find('.p-info').hide();
      })
    }
    // 灯数量饼图方法
    function createDoughnut(type){
      var dom = document.getElementById(type.id);
      var myChart = echarts.init(dom);
      var value = type.val;
      option = {
          title: {
              text: '{a|' + value + '}{c|\n当前'+ type.title +'灯\n统计数量}',
              x: 'center',
              y: '30%',
              textStyle: {
                  rich: {
                      a: {
                          fontSize: fontSize(.6),
                          color: type.color,
                          fontFamily:'Impact'
                      },

                      c: {
                          fontSize: fontSize(.16),
                          color: '#333',
                          lineHeight:14,
                      }
                  }
              }
          },
          series: [
            {
                  name: '',
                  type: 'pie',
                  radius: ['65%', '40%'],
                  center: ['50%', '47%'],
                  silent: true,
                  clockwise: true,
                  startAngle: 90,
                  z: 0,
                  zlevel: 0,
                  label: {
                      normal: {
                          position: "center",

                      }
                  },
                  data: [{
                          value: value,
                          name: "",
                          itemStyle: {
                              normal: {
                                  color: type.color,
                              }
                          }
                      },
                      {
                          value: type.totleVal - value,
                          name: "",
                          label: {
                              normal: {
                                  show: false
                              }
                          },
                          itemStyle: {
                              normal: {
                                  color: "#ddd"
                              }
                          }
                      }
                  ]
              },
              {
                  name: "",
                  type: "gauge",
                  radius: "70%",
                  center: ['50%', '47%'],
                  startAngle: 0,
                  endAngle: 359.9,
                  splitNumber: 8,
                  hoverAnimation: true,
                  axisTick: {
                      show: false
                  },
                  splitLine: {
                      length: 60,
                      lineStyle: {
                          width: 3,
                          color: "#fff"
                      }
                  },
                  axisLabel: {
                      show: false
                  },
                  pointer: {
                      show: false
                  },
                  axisLine: {
                      lineStyle: {
                          opacity: 0
                      }
                  },
                  detail: {
                      show: false
                  },
                  data: [{
                      value: 0,
                      name: ""
                  }]
              },

          ]
      };
      myChart.setOption(option, true);
    }

    function createBar(){
      var dateArr = [],red_data=[],yel_data = [];
      $.ajax({
        type: "GET",
        url: "/linkong/matterProject/setectHalfYearMatterCount",
        data: '',
        cache: false,
        contentType: false,
        processData: false,
        async: false,
        success: function(result) {
          result.result.forEach(function(item,index){
            dateArr.push(item.dateStr);
            // dateValue.push(item.dateTotalCount);
            red_data.push(item.redLightCount);
            yel_data.push(item.yelLightCount);
          })
        },
        error: function(error) {
          $.modal.alertWarning("获取数据失败。");
        }
      });

      var dom = document.getElementById('echarts-bar');
      var myChart = echarts.init(dom);
      option = {
        color: ['#ed0000','#ffb400'],
        tooltip : {
          trigger: 'axis',
          axisPointer : {            // 坐标轴指示器，坐标轴触发有效
            type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
          }
        },
        legend: {
          data: ['红灯数', '黄灯数'],


        },
        grid: {
          left: '3%',
          right: '4%',
          bottom: '3%',
          containLabel: true
        },
        xAxis : [
          {
            type : 'category',
            // data : ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
            data : dateArr,

          }
        ],
        yAxis : [
          {
            type : 'value',
            name:'',
          },

        ],
        series : [

          {
            name: '红灯数',
            type: 'bar',
            data: red_data
          },
          {
            name: '黄灯数',
            type: 'bar',
            data: yel_data
          },
        ]
      };
      myChart.setOption(option, true);
    }
    // echarts设置字体大小方法
    function fontSize(res){
      var docEl = document.documentElement,
          clientWidth = window.innerWidth||document.documentElement.clientWidth||document.body.clientWidth;
      if (!clientWidth) return;
      var fontSize = 100 * (clientWidth / 1920);
      return res*fontSize;
    }
    changepage(1);
    function changepage(currPage) {
      if (currPage == null || currPage == "" || currPage == 0) {
        currPage = 1;
      }
      var str = "";
      $.ajax({
        type: "POST",
        url: "/linkong/matterProject/indexList",
        data: {pageNum:currPage},
        cache: false,
        async: false,
        success: function(result) {
          $.each(result.rows, function (i, value) {
            var strdate = value.expectedDate == null ?"":value.expectedDate.substr(0,10);
            var lightType = value.light ;
            var imgtag ="";
            var namestr = "";
            var proName = value.proName.length > 8 ?value.proName.substr(0,8) + '...':value.proName;
            var id = value.proId
            var proMatterIds = value.proMatterIds;
            var redLight = value.redLight == null ? 0 : value.redLight;
            var yelLight = value.yelLight == null ? 0 : value.yelLight;
            var mainOrgname =  value.mainOrgname==null?"": value.mainOrgname;
            var redl = "grey-light"
            var yell = "grey-light"
            // if (lightType == "1") {
            //   imgtag = '<img  class="imgtag" src="img/light_02.png" alt="">';
            // } else if (lightType == "2") {
            //   imgtag = '<img  class="imgtag" src="img/light_03.png" alt="">';
            // }
            if(value.name == null && value.projectId == null){
              namestr = '未开始';
            }else if(value.name == null && value.projectId != null){
              namestr = '已结束';
            }else{
              namestr = value.name.length > 15? value.name.substr(0,12) + '...':value.name;
            }

            if(redLight != 0){
              redl = "red-light" ;
            }
            if(yelLight != 0){
              yell = "yel-light" ;
            }

            str += '<tr>'
                    // + '<td><div class="red-light">' + redLight + '</div></td>'
                    + '<td><div id="light">' +
                    '<div class='+ redl +'>' + redLight + '</div>' +
                    '<div class='+ yell +'>' + yelLight + '</div></div></td>'
                    + '<td  class="pro_name" title="' + value.proName + '" onclick=viewMatterProject('+ id +')>' + proName + '</td>'
                    + '<td title="' + value.name +'">' + namestr + '</td>'
                    + '<td>' + mainOrgname+ '</td>'
                    + '<td>' + strdate + '</td>'
                    + '<td>' ;
                    if(namestr == '未开始'){
                      str += '<a href="javascript:void(0)" style="color: grey;cursor: default" class="edit">立即查看</a></td>';
                    }else{
                      str +=  '<a href="#" onclick="see_btn('+ value.projectId + ' )" class="edit">立即查看</a></td>';
                    }
                    str += '<tr>';
          })
          $("#show_tbody").html(str);
          if (currPage > Math.ceil(result.total / 10)) {
            currPage = Math.ceil(result.total / 10);
          }
          var totalNum = 0;
          if (result.total <= 0 || result == null) {
            totalNum = 0;
          }else{
            totalNum = Math.ceil(result.total);
          }
          paging(currPage,Math.ceil(result.total / 10),totalNum);
        }
      });
      //分页插件
      function paging(pageNo,totalPage,totalNum){
        $("#pagination").whjPaging({
          css: 'css-2',
          totalNum: totalNum,
          totalPage: totalPage,
          callBack: function (currPage, pageSize) {
            changepage(currPage);
          }
        });
        /* 参数2：当前页面， 参数3：总页数， 参数4：总条数*/
        $("#pagination").whjPaging("setPage", pageNo, totalPage, totalNum);
      }
    }

    // 查看所有事项
    function viewMatterProject(id){
      // $.modal.open("事项查看", "linkong/project/matter_audit/" + id + "?ids=" + proMatterIds + "&flasAuditOrView=flase",1400);
      var data_id = id;
      var options = {
        url: '/linkong/project/edit/'+ data_id + '?flag=see',
        title:  "项目详情",
        width:1200,
        height:800,
        btn :[ '<i class="fa fa-close"></i> 关闭'],
        callBack:closeTab
      }
      $.modal.openOptions(options);
    }




    function closeTab(index){
      layer.close(index);
    }

    function see_btn(proId){
      $.modal.openTab("项目信息" , "/toPrejectDetail?proId=" + proId);
    }

    /** 项目more */
    function projectmore(){
      $.modal.openTab("项目警示信息" , "/linkong/log/projectmore");
      // $.modal.openTab("项目警示信息" , "/index_p");
    }
    /**部门事项信息*/
    function deptMore(){
      $.modal.openTab("部门事项信息", "/linkong/matterProject/deptMore");
    }

    // 跳转至告示单
    function jumpNotice(){
      $.modal.openTab("告示单", "/linkong/notice");
    }

    function lightmore(tab){
      $.modal.openTab("亮灯列表" , "/linkong/matterProject/view?tab=" + tab);
      // $.modal.openTab("项目警示信息" , "/index_p");
    }



    /** 待办事项 */
    function backlog(){
      parent.layer.open({
        type: 2,
        area: [800 + 'px', 600 + 'px'],
        fix: false,
        //不固定
        maxmin: true,
        shade: 0.3,
        title: '待办事项',
        content: '/linkong/project/selectProjectBacklog',
        btn: ['关闭'],
        // 弹层外区域关闭
        shadeClose: true,
        cancel: function(index) {
          return true;
        }
      });
    }

    /** 事项接受 */
    // function signFor(){
      // $.get("/linkong/matterProject/acceptingCount",function(result){
      //     if (result > 0){
      //       top.layer.open({
      //         type: 2,//iframe层
      //         title: '事项清单',
      //         shade: 0.3,
      //         maxmin: false,
      //         fix: false,
      //         area : ['800px', $(window).height() - 50 + 'px'],
      //         content: '/linkong/matterProject/signFor',
      //         btn: ['事项签收'],
      //         yes:signForSubmit,
      //         end:function(){
      //           $.modal.alertWarning("您有【"+[[${taskFillCount}]]+ "】条进度填报待办，请前往相应菜单尽快填报。")
      //         }
      //       });
      //       // var options = {
      //       //   title: "事项清单",
      //       //   url: '/linkong/matterProject/signFor',
      //       //   btn: ['事项签收'],
      //       //   callBack: signForSubmit
      //       // };
      //       // $.modal.openOptions(options);
      //     }
      // })
    // }
    // function signForSubmit(index, layero) {
    //   $.modal.confirm("确认签收所有项目事项？", function() {
    //     $.post("/linkong/matterProject/updateAcceptingState",function(result){
    //         if (result.code == 0){
    //           $.modal.msgSuccess(result.msg);
    //           layer.close(index);
    //         }else{
    //           $.modal.alertError(result.msg);
    //         }
    //     });
    //   })
    // }

    function preview(id, isRead) {
      var url = '/linkong/notice/preview2/' + id;
      var options2 = {
        title: "预览",
        url: url,
        btn: 'hidden'
      };
      $.modal.openOptions(options2);
    }


    function deptBar(f){
      if(!f){
        $("#back_btn").show();
      }else{
        $("#back_btn").hide();
      }

      var dom = document.getElementById("echarts-dept");
      var myChart = echarts.init(dom);
      option = null;
      option = {

        tooltip: {
          trigger: 'item',
          formatter: '{b}:总灯 {c} ({d}%)'
        },
        legend: {
          type: 'plain',
          selectedMode:f,
          // orient: 'vertical',
          bottom: 10,
          left: 'left',
          textStyle: {
            color: '#000'          // 图例文字颜色
          },
          tooltip:{
            show:false
          },
          formatter: function (params) {
            for (var i = 0; i < seriesData.length; i++) {
              if (seriesData[i].name == params) {
                return params;
              }
            }
          },
          // data: ['规划建设部', '招商联络部', '经营发展部', '市场部门']
        },
        series: [
          {
            name: '',
            type: 'pie',
            radius: '55%',
            center: ['50%', '50%'],
            data: seriesData,
            label:{            //饼图图形上的文本标签
              normal:{
                show:true,
                position:'inner', //标签的位置
                textStyle : {
                  fontWeight : 300 ,
                  fontSize : 16    //文字的字体大小
                },
                formatter:'{c}个'


              }
            },
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 1,
                shadowColor: '#000000'
              },
              normal: {
                label: {
                  show: false,
                },
                labelLine: {show: false}
              },
            }
          }
        ]
      };
      ;
      if (option && typeof option === "object") {
        myChart.setOption(option, true);
      }
      myChart.on('legendselectchanged',function(parms){


        var selectArr = myobj[parms.name];
        initDeptCharsData(selectArr[0].mainOrg);


      })
    }
  var myobj = {},seriesData = [],flag = true;
    function initDeptCharsData(mainOrg){
      $.ajax({
        url: '/linkong/matterProject/selectLightGroupByOrg',
        type: 'POST',
        async: false,
        data: {mainOrg:mainOrg},
        dataType: "JSON",
        success: function (data) {
          myobj = data;
          if(seriesData.length > 0){
            seriesData = [];
            flag = false;
          }
          for (var prop in myobj) {
            if(myobj[prop].length > 0){
              var name = prop;
              var value = myobj[prop].length;
              if(name == '黄灯'){
                seriesData.push({
                  name: name,
                  value: value,
                  itemStyle:{color:'#ffb400'}
                });

              }else if(name == '红灯'){
                seriesData.push({
                  name: name,
                  value: value,
                  itemStyle:{color:'#ed0000'}
                });
              }else{
                seriesData.push({
                  name: name,
                  value: value
                });
              }

            }
          }
          if(mainOrg == null){
            flag = true;
          }
          deptBar(flag);
        }
      })
    }

    function back_fun(){
      seriesData = [];
      initDeptCharsData(null);
    }



  </script>
</body>
</html>